<div class="section section-lg @@classes components-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="mb-3">
                    <h2 class="h5">Main Buttons</h2>
                </div>
                <!--Buttons-->
                <button class="btn btn-primary" type="button">Button</button>
                <button class="btn btn-primary" type="button">
                    <span class="mr-1"><span class="fas fa-book-open"></span></span>
                    Icon Left
                </button>
                <button class="btn btn-primary" type="button">
                    Icon Right
                    <span class="ml-1"><span class="fas fa-book-open"></span></span>
                </button>
                <button class="btn btn-icon-only btn-primary" type="button" aria-label="love button" title="love button">
                    <span aria-hidden="true" class="far fa-heart"></span>
                </button>
                <!--End of Buttons-->
                <div class="mb-3 mt-5">
                    <h3 class="h5">Round Main Buttons</h3>
                </div>
                <!--Buttons-->
                <button class="btn btn-pill btn-primary" type="button">Button</button>
                <button class="btn btn-pill btn-primary" type="button">
                    <span class="mr-1"><span class="fas fa-cog"></span></span>
                    Icon Left
                </button>
                <button class="btn btn-pill btn-primary" type="button">
                    Icon Right
                    <span class="ml-1"><span class="fas fa-cog"></span></span>
                </button>
                <button class="btn btn-icon-only btn-pill btn-primary" type="button" aria-label="up button" title="up button">
                    <span aria-hidden="true" class="far fa-thumbs-up"></span>
                </button>
                <div class="mb-3 mt-5">
                    <h3 class="h5">Animated Buttons</h3>
                </div>
                <button class="btn btn-primary animate-up-2" type="button">Animate up</button>
                <button class="btn btn-primary animate-right-3" type="button">Animate right</button>
                <button class="btn btn-primary animate-down-2" type="button">Animate down</button>
                <button class="btn btn-primary animate-left-3" type="button">Animate left</button>
                <div class="mb-3 mt-5">
                    <h3 class="h5">Loading Buttons</h3>
                </div>
                <!--Buttons-->
                <button class="btn btn-primary" type="button" disabled>
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    <span class="sr-only">Loading...</span>
                </button>
                <button class="btn btn-primary" type="button" disabled>
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    <span class="ml-1">Loading...</span>
                </button>
                <button class="btn btn-secondary" type="button" disabled>
                    <span class="ml-1">Loading...</span>
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                </button>
                <!--End of Buttons-->
                <div class="mb-3 mt-5">
                    <h3 class="h5 font-weight-bold mb-3">Dropdown buttons</h3>
                    <div class="dropdown">
                        <div class="btn-group mr-2 mb-2">
                            <button type="button" class="btn btn-primary">Primary</button>
                            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="fas fa-angle-down dropdown-arrow"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Separated link</a>
                            </div>
                        </div>
                        <div class="btn-group mb-2 mr-2">
                            <button type="button" class="btn btn-tertiary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="fas fa-angle-down dropdown-arrow"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Separated link</a>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 mt-5">
                        <h3 class="h5">Link Buttons</h3>
                    </div>
                    <!--Buttons-->
                    <a href="#" class="text-dark font-weight-bold mr-3">Primary</a>
                    <a href="#" class="text-dark font-weight-bold mr-3">
                        <span class="mr-1"><span class="fas fa-link"></span></span>
                        Icon Left
                    </a>
                    <a href="#" class="text-dark font-weight-bold">
                        Icon Right
                        <span class="ml-1"><span class="fas fa-link"></span></span>
                    </a>
                    <!--End of Buttons-->
                    <div class="mb-3 mt-5">
                        <h3 class="h5">Sizes</h3>
                    </div>
                    <!--Buttons-->
                    <button class="btn btn-sm btn-primary" type="button">Small</button>
                    <button class="btn btn-primary" type="button">Regular</button>
                    <button class="btn btn-lg btn-primary" type="button">Large Button</button>
                    <!--End of Buttons-->
                    <!-- Button colors -->
                    <div class="mb-4 mt-5">
                        <h3 class="h5">Choose your color</h3>
                    </div>
                    <!--Buttons-->
                    <button class="btn btn-primary text-dark" type="button">Secondary</button>
                    <button class="btn btn-primary text-secondary" type="button">Secondary</button>
                    <button class="btn btn-primary text-info" type="button">Info</button>
                    <button class="btn btn-primary text-success" type="button">Success</button>
                    <button class="btn btn-primary text-danger" type="button">Danger</button>
                    <button class="btn btn-primary text-dark" type="button">Dark</button>
                    <button class="btn btn-primary text-gray" type="button">Gray</button>
                    <!-- Button links -->
                    <div class="mb-3 mt-5">
                        <small class="text-uppercase font-weight-bold">Links</small>
                    </div>
                    <!--Buttons-->
                    <a href="#" class="text-default mr-3">Default</a>
                    <a href="#" class="text-secondary mr-3">Secondary</a>
                    <a href="#" class="text-tertiary mr-3">Tertiary</a>
                    <a href="#" class="text-info mr-3">Info</a>
                    <a href="#" class="text-success mr-3">Success</a>
                    <a href="#" class="text-danger mr-3">Danger</a>
                    <a href="#" class="text-dark mr-3">Dark</a>
                    <a href="#" class="text-gray">Gray</a>
                    <!--End Of Buttons-->
                </div>
                <div class="row">
                    <div class="col-lg-4 col-md-6">
                        <!-- Button Social -->
                        <div class="mb-4 mt-5">
                            <h3 class="h5 font-weight-bold">Social Buttons</h3>
                        </div>
                        <button class="btn btn-facebook" type="button">
                            <span class="mr-1"><span class="fab fa-facebook-f"></span></span>
                            Login with Facebook
                        </button>
                        <br>
                        <button class="btn btn-pinterest" type="button">
                            <span class="mr-1"><span class="fab fa-pinterest-p"></span></span>
                            Share on Pinterest
                        </button>
                        <br>
                        <button class="btn btn-github" type="button">
                            <span class="mr-1"><span class="fab fa-github-alt"></span></span>
                            Login with GitHub
                        </button>
                        <br>
                        <button class="btn btn-twitch" type="button">
                            <span class="mr-1"><span class="fab fa-twitch"></span></span>
                            Subscribe Now
                        </button>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <!-- Button Social -->
                        <div class="mb-4 mt-5">
                            <h3 class="h5 font-weight-bold">Round Social Buttons</h3>
                        </div>
                        <button class="btn btn-pill btn-facebook" type="button">
                            <span class="mr-1"><span class="fab fa-facebook-f"></span></span>
                            Login with Facebook
                        </button>
                        <br>
                        <button class="btn btn-pill btn-pinterest" type="button">
                            <span class="mr-1"><span class="fab fa-pinterest-p"></span></span>
                            Share on Pinterest
                        </button>
                        <br>
                        <button class="btn btn-pill btn-github" type="button">
                            <span class="mr-1"><span class="fab fa-github-alt"></span></span>
                            Login with GitHub
                        </button>
                        <br>
                        <button class="btn btn-pill btn-twitch" type="button">
                            <span class="mr-1"><span class="fab fa-twitch"></span></span>
                            Subscribe Now
                        </button>
                    </div>
                    <div class="col-lg-1 col-md-3">
                        <!-- Square -->
                        <div class="mb-4 mt-5">
                            <h3 class="h5">Square</h3>
                        </div>
                        <button class="btn btn-icon-only btn-facebook" type="button" aria-label="facebook button" title="facebook button">
                            <span aria-hidden="true" class="fab fa-facebook"></span>
                        </button>
                        <button class="btn btn-icon-only btn-pinterest" type="button" aria-label="pinterest button" title="pinterest button">
                            <span aria-hidden="true" class="fab fa-pinterest-p"></span>
                        </button>
                        <button class="btn btn-icon-only btn-youtube" type="button" aria-label="youtube button" title="youtube button">
                            <span aria-hidden="true" class="fab fa-youtube"></span>
                        </button>
                        <button class="btn btn-icon-only btn-github" type="button" aria-label="github button" title="github button">
                            <span aria-hidden="true" class="fab fa-github-alt"></span>
                        </button>
                        <button class="btn btn-icon-only btn-twitch" type="button" aria-label="twitch button" title="twitch button">
                            <span aria-hidden="true" class="fab fa-twitch"></span>
                        </button>
                        <button class="btn btn-icon-only btn-paypal" type="button" aria-label="paypal button" title="paypal button">
                            <span aria-hidden="true" class="fab fa-paypal"></span>
                        </button>
                        <button class="btn btn-icon-only btn-behance" type="button" aria-label="behance button" title="behance button">
                            <span aria-hidden="true" class="fab fa-behance"></span>
                        </button>
                    </div>
                    <div class="col-lg-1 col-md-2">
                        <!-- Circle -->
                        <div class="mb-4 mt-5">
                            <h3 class="h5">Circle</h3>
                        </div>
                        <button class="btn btn-icon-only btn-pill btn-facebook" type="button" aria-label="facebook button" title="facebook button">
                            <span aria-hidden="true" class="fab fa-facebook"></span>
                        </button>
                        <button class="btn btn-icon-only btn-pill btn-pinterest" type="button" aria-label="pinterest button" title="pinterest button">
                            <span aria-hidden="true" class="fab fa-pinterest-p"></span>
                        </button>
                        <button class="btn btn-icon-only btn-pill btn-youtube" type="button" aria-label="youtube button" title="youtube button">
                            <span aria-hidden="true" class="fab fa-youtube"></span>
                        </button>
                        <button class="btn btn-icon-only btn-pill btn-github" type="button" aria-label="github button" title="github button">
                            <span aria-hidden="true" class="fab fa-github-alt"></span>
                        </button>
                        <button class="btn btn-icon-only btn-pill btn-twitch" type="button" aria-label="twitch button" title="twitch button">
                            <span aria-hidden="true" class="fab fa-twitch"></span>
                        </button>
                        <button class="btn btn-icon-only btn-pill btn-paypal" type="button" aria-label="paypal button" title="paypal button">
                            <span aria-hidden="true" class="fab fa-paypal"></span>
                        </button>
                        <button class="btn btn-icon-only btn-pill btn-behance" type="button" aria-label="behance button" title="behance button">
                            <span aria-hidden="true" class="fab fa-behance"></span>
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>